<template>
  <div id="app">
    <canvas ref="canvas" class="webgl-canvas"></canvas>
    <div class="controls">
      <button @click="toggleRotation">{{ isRotating ? '停止旋转' : '开始旋转' }}</button>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      galaxy: null,
      periodicTable: null,
      isRotating: true,
      rotationSpeed: 0.01,
    };
  },
  methods: {
    // 初始化场景
    initScene() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);

      this.camera.position.z = 50;

      // 创建星系球体
      this.createGalaxy();
      // 创建元素周期表
      this.createPeriodicTable();
    },

    // 创建星系图
    createGalaxy() {
      // 创建星系球体
      const geometry = new THREE.SphereGeometry(20, 32, 32);
      const material1 = new THREE.MeshBasicMaterial({
        color: 0x000000,
        wireframe: true,
      });

      this.galaxy = new THREE.Mesh(geometry, material1);
      this.scene.add(this.galaxy);

      // 生成粒子模拟星星
      const particleCount = 2000;
      const particles = new THREE.BufferGeometry();
      const positions = new Float32Array(particleCount * 3);
      for (let i = 0; i < particleCount; i++) {
        positions[i * 3] = (Math.random() - 0.5) * 50;
        positions[i * 3 + 1] = (Math.random() - 0.5) * 50;
        positions[i * 3 + 2] = (Math.random() - 0.5) * 50;
      }

      particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.5 });
      const particleSystem = new THREE.Points(particles, material);
      this.scene.add(particleSystem);
    },

    // 创建元素周期表
    createPeriodicTable() {
      const elements = [
        'H', 'He', 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne',
        'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar', 'K', 'Ca',
        // 继续添加其他元素
      ];

      const radius = 25;
      const angleStep = Math.PI * 2 / elements.length;

      elements.forEach((element, index) => {
        const geometry = new THREE.SphereGeometry(1, 8, 8);
        const material4 = new THREE.MeshBasicMaterial({
          color: Math.random() * 0xffffff,
        });
        const sphere = new THREE.Mesh(geometry, material4);

        const angle = angleStep * index;
        sphere.position.x = radius * Math.cos(angle);
        sphere.position.y = radius * Math.sin(angle);
        sphere.position.z = 0;

        this.scene.add(sphere);
      });
    },

    // 动画
    animate() {
      if (this.isRotating) {
        this.galaxy.rotation.y += this.rotationSpeed;  // 旋转星系球
      }
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },

    // 切换旋转状态
    toggleRotation() {
      this.isRotating = !this.isRotating;
    },
  },

  mounted() {
    this.initScene();
    this.animate();
  },
};
</script>

<style scoped>
#app {
  position: relative;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

.controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  color: white;
}

button {
  padding: 10px 20px;
  margin: 5px;
  background-color: #008cba;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #005f72;
}

.webgl-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>
